<script setup lang="ts">
import type { FormDesignerComponents } from "../FormComponentMixin";
import CommonConfig from "./CommonConfig.vue";
import { VueDraggable } from "vue-draggable-plus";
const config = defineModel<FormDesignerComponents>("config");
const propsCollapse = ref("0");

function addOption() {
  config.value.props.options.push({
    label: `选项${config.value.props.options.length + 1}`,
    value: `${config.value.props.options.length + 1}`
  });
}
</script>

<template>
  <el-collapse v-model="propsCollapse" accordion>
    <el-collapse-item name="0">
      <template #title>
        <div class="collapse-title">
          <el-icon color="#1890ff"><List /></el-icon>
          <div>基本属性</div>
        </div>
      </template>
      <CommonConfig v-model:config="config" />
      <el-form-item label="提示文字">
        <el-input v-model="config.props.placeholder" placeholder="输入提示" />
      </el-form-item>
      <el-form-item label="选项来源">
        <el-radio-group v-model="config.props.optionType">
          <el-radio label="静态数据" value="0"></el-radio>
          <el-radio label="动态数据" value="1"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选项设置" v-if="config.props.optionType === '1'">
        <el-input v-model="config.props.optionUrl" placeholder="请求地址" />
        <el-input v-model="config.props.optionLabel" placeholder="label字段" />
        <el-input v-model="config.props.optionValue" placeholder="value字段" />
      </el-form-item>
      <el-form-item label="选项设置" v-if="config.props.optionType === '0'">
        <el-button type="primary" icon="circle-plus" @click="addOption"
          >添加选项</el-button
        >
      </el-form-item>
      <vue-draggable
        class="w-fd-options"
        handle=".w-move"
        :animation="150"
        v-model="config.props.options"
        v-if="config.props.optionType === '0'"
      >
        <div
          style="display: flex; justify-content: space-between"
          v-for="(option, i) in config.props.options"
        >
          <el-button icon="Rank" class="w-move" />
          <el-input v-model="config.props.options[i].value" />
          <el-input v-model="config.props.options[i].label" />
          <el-button icon="Delete" @click="config.props.options.splice(i, 1)" />
        </div>
      </vue-draggable>
      <el-form-item label="选项展开">
        <el-switch v-model="config.props.expanding" />
      </el-form-item>
      <el-form-item label="隐藏名称">
        <el-switch v-model="config.props.hideLabel" />
      </el-form-item>
      <el-form-item label="是否必填">
        <el-switch v-model="config.props.required" />
      </el-form-item>
    </el-collapse-item>
  </el-collapse>
</template>

<style lang="scss" scoped>
.w-fd-options {
  margin-bottom: 10px;
}
:deep(.w-fd-options) {
  .el-input-group__append,
  .el-input-group__prepend {
    padding: 0 10px;
  }
}
.collapse-title {
  padding: 0px 5px;
  display: flex;
  align-items: center;

  & > div {
    margin-left: 10px;
  }
}
.w-move {
  cursor: move;
}
</style>
